/*
  学习目标：props的两大特点
  1. props可以传递任意的数据类型
    string  number boolean  null undefined 数组 对象
    💥 函数/ JSX
  2. 单项数据流:
     props是只读的
     props是更加严格的单项数据流, 无法通过引用地址绕过单项数据流
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello list={[1, 2, 3]} age={18} name="zs"></Hello>
      </div>
    );
  }
}

// 👍 推荐解构props
function Hello(props) {
  return (
    <div>
      Hello
      <h1>{props.name}</h1>
      <h1>{props.list}</h1>
      <button
        onClick={() => {
          props.list.push(4);
        }}
      >
        点我修改list
      </button>
      <button
        onClick={() => {
          props.name = 'ls';
        }}
      >
        点我修改name
      </button>
    </div>
  );
}
